<template>
  <div class="purchase-order-page">
    <!-- 搜索筛选区域 -->
    <div class="search-filter-container">
      <div class="search-filter-bar">
        <!-- 左侧搜索框 -->
        <el-input
          v-model="searchParams.keyword"
          placeholder="请输入单据号或供应商或备注"
          class="keyword-input"
          clearable
        >
          <template #prefix>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-input>

        <!-- 右侧筛选条件 -->
        <div class="filter-conditions">
          <!-- 日期范围选择 -->
          <el-date-picker
            v-model="searchParams.dateRange"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="2025-06-01"
            end-placeholder="2025-06-27"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="date-range-picker"
          />

          <!-- 订单状态选择 -->
          <el-select
            v-model="searchParams.orderStatus"
            placeholder="订单状态"
            clearable
            class="status-select"
          >
            <el-option label="全部" value="" />
            <el-option label="待审核" value="pending" />
            <el-option label="已审核" value="approved" />
            <el-option label="已取消" value="canceled" />
          </el-select>

          <!-- 审核状态选择 -->
          <el-select
            v-model="searchParams.auditStatus"
            placeholder="审核状态"
            clearable
            class="status-select"
          >
            <el-option label="全部" value="" />
            <el-option label="待审核" value="pending" />
            <el-option label="已审核" value="approved" />
          </el-select>

          <!-- 仓库输入 -->
          <el-input
            v-model="searchParams.warehouse"
            placeholder="仓库"
            clearable
            class="warehouse-input"
          />

          <!-- 商品输入 -->
          <el-input
            v-model="searchParams.product"
            placeholder="商品"
            clearable
            class="product-input"
          />
            <el-button type="primary">搜索</el-button>
          <!-- 高级搜索按钮 -->
          <el-button
            type="text"
            class="advanced-search-btn"
            @click="handleAdvancedSearch"
          >
            高级搜索
          </el-button>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="order-table-container">
      <el-table
        :data="[]"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="operation" label="操作" width="80" align="center">
          <template #default>
            <el-button type="text">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="订单日期" width="120" align="center" />
        <el-table-column prop="orderNo" label="订单编号" width="180" align="center" />
        <el-table-column prop="businessType" label="业务类别" width="100" align="center" />
        <el-table-column prop="supplier" label="供应商" width="220" align="center" />
        <el-table-column prop="supplierType" label="供应商类别" width="120" align="center" />
        <el-table-column prop="salesman" label="业务员" width="100" align="center" />
        <el-table-column prop="relatedOrderNo" label="关联购货单号" width="180" align="center" />
        <el-table-column prop="purchaseAmount" label="购货金额" width="120" align="right" />
        <el-table-column prop="discountAmount" label="优惠金额" width="120" align="right" />
        <el-table-column prop="finalAmount" label="优惠后金额" width="120" align="right" />
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        <el-table-column prop="orderStatus" label="订单状态" width="120" align="center" />
        <el-table-column prop="deliveryDate" label="交货日期" width="120" align="center" />
        <el-table-column prop="creator" label="制单人" width="100" align="center" />
        <el-table-column prop="createTime" label="制单时间" width="180" align="center" />
        <el-table-column prop="auditor" label="审核人" width="100" align="center" />
        <el-table-column prop="deliveryMethod" label="交货方式" width="120" align="center" />
        <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip />
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="1"
        :page-size="10"
        :total="0"
        layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'PurchaseOrderPage',
  components: { Search },
  data() {
    return {
      searchParams: {
        keyword: '',
        dateRange: ['2025-06-01', '2025-06-27'],
        orderStatus: '',
        auditStatus: '',
        warehouse: '',
        product: ''
      }
    }
  },
  methods: {
    handleAdvancedSearch() {
      console.log('高级搜索按钮点击')
      // 高级搜索功能待实现
    }
  }
}
</script>

<style scoped>
.purchase-order-page {
  padding: 20px;
  background-color: #ffffff;
}

.search-filter-container {
  margin-bottom: 20px;
}

.search-filter-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 4px;
}

.keyword-input {
  width: 280px;
  margin-right: 15px;
}

.search-icon {
  color: #c0c4cc;
}

.filter-conditions {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.date-range-picker {
  width: 250px;
  margin-right: 10px;
}

.status-select,
.warehouse-input,
.product-input {
  width: 120px;
  margin-right: 10px;
}

.advanced-search-btn {
  margin-left: auto;
  padding-right: 0;
  color: #606266;
}

.order-table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

/* 调整Element UI默认样式 */
.el-date-editor .el-range-separator {
  padding: 0;
}

.el-input__inner {
  border-radius: 4px;
}
</style>